<template>
	<div class="song-list">
		<ul>
			<li 
        @click="selectItem(song, index)" 
        v-for="(song, index) in songs" 
        class="item">
        <div class="rank" v-show="rank">
          <span :class="getRankCls(index)">{{getRankText(index)}}</span>
        </div>
				<div class="content">
					<h2 class="name">{{song.name}}</h2>
					<p class="desc">{{getDesc(song)}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>


<script>

	export default {
    // 子组件通过props来接收数据: 
		props: {
			songs: {
				type: Array,
				default: []
			},
      rank: {
        type: Boolean,
        default: false
      }
		},
		methods: {
      // 基础组件，只派发事件
      selectItem(item, index) {
        // 告诉父组件 我点击了，点击的元素是谁，索引是多少 （被 music-list.vue 组件所用）
        this.$emit('select',item, index)
      },
      getDesc(song) {
        return `${song.singer}.${song.album}`
      },
      // 如果是前三个歌曲，则显示对应的图标
      // index从0开始
      getRankCls(index) {
        if (index <= 2) {

          return  `icon icon${index}`
        } else {
          return `text`
        }
      },
      // 如果index > 2 则用数字表示
      getRankText(index) {
        if(index > 2) {
          return index + 1
        }
      }
		}
	}
</script>


<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  
  .song-list
    .item
      display: flex
      align-items: center
      box-sizing: border-box
      height: 64px
      font-size: $font-size-medium
      .rank
        flex: 0 0 25px
        width: 25px
        margin-right: 30px
        text-align: center
        .icon
          display: inline-block
          width: 25px
          height: 24px
          background-size: 25px 24px
          &.icon0
            bg-image('first')
          &.icon1
            bg-image('second')
          &.icon2
            bg-image('third')
        .text
          color: $color-theme
          font-size: $font-size-large
      .content
        flex: 1
        line-height: 20px
        overflow: hidden
        .name
          no-wrap()
          color: $color-text
        .desc
          no-wrap()
          margin-top: 4px
          color: $color-text-d

	
</style>